<style scoped>
  #storeInfo {
    height:50px;
    background-color: #fff;
    padding:5px 0;
  }
  #storeInfo .name h3{
    text-align: left;
    font-size: 18px;
    text-indent:20px;
  }
  #storeInfo .name h3 .logo{
    width:40px;
    height:40px;
    border-radius:50%;
  }
  #storeInfo .link{
    text-align: right;
    padding-right:20px;
    font-size:14px;
    line-height: 40px;
  }
  .dashboard-wrapper{
    height: calc(100vh - 100px);
    overflow-y: auto;
  }
  .dashboard-container{
    min-height: calc(100vh - 100px);
    padding:20px;
    background-color: #ececec;
  }
  .c-header-title{
    text-align: left;
    font-size:16px;
    color:#555;
  }
  .c-header-extra{
    text-align: right;
    font-size:14px;
    color:#aaa;
  }
  .c-header-extra.tabs .tab{
    cursor: pointer;
  }
  .c-header-extra.tabs .tab-active{
    color:#0099CC;
  }
  .dashboard-container .cBody{
    text-align: left;
  }
  .dashboard-container .stat-t{
    font-size: 14px;
    color:#555;
  }
  .dashboard-container .stat-p{
    font-size: 26px;
    color:#000;
    font-weight: bolder;
  }
  .dashboard-container .stat-y{
    font-size: 12px;
    color:#999;
  }
  .sale-show-box,.sale-show-box li{
    list-style: none;
  }
  .sale-show-box li{
    padding:10px 0;
    text-align: left;
    border-bottom:1px solid #e2e2e2;
  }
  .sale-show-box .total{
    text-align: center;
  }
  .sale-show-box .per{
    text-align: center;
  }
  .member-box .stat-m{
    font-size:14px;
    line-height: 3.5;
  }
</style>
<template>
  <div class="page-container">
    <a-row id="storeInfo">
      <a-col :span="12" class="name">
        <h3><img :src="logo" class="logo" /></h3>
      </a-col>
      <a-col :span="12" class="link">
        <a-button class="ant-btn-text" @click="onEdit"><a-icon type="smile"></a-icon><span>{{companyName}}</span><a-icon type="right"></a-icon></a-button>
      </a-col>
    </a-row>
    <div class="dashboard-wrapper">
    <div class="dashboard-container">
      <a-card>
        <h3 slot="title" class="c-header-title">实时概况<span></span></h3>
        <div slot="extra" class="c-header-extra">更新时间: {{formatDate(new Date())}}</div>

        <a-card-grid style="minWidth:180px;width:20%;height:140px;" class="grid-card">
          <div class="cBody">
            <p class="stat-t">总订单数(笔)</p>
            <p class="stat-p">{{formatMoney(resp.todayOrderStat.countTotal)}}</p>
            <p class="stat-y">昨日: {{formatMoney(resp.yesterdayOrderStat.countTotal)}}</p>
          </div>
        </a-card-grid>
        <a-card-grid style="minWidth:200px;width:20%;height:140px;" class="grid-card">
          <div class="cBody">
            <p class="stat-t">总销售额(元)</p>
            <p class="stat-p">{{formatMoney(resp.todayOrderStat.amountTotal)}}</p>
            <p class="stat-y">昨日: {{formatMoney(resp.yesterdayOrderStat.amountTotal)}}</p>
          </div>
        </a-card-grid>
        <a-card-grid style="minWidth:180px;width:20%;height:140px;" class="grid-card">
          <div class="cBody">
            <p class="stat-t">水销售额(元)</p>
            <p class="stat-p">{{formatMoney(resp.todayOrderStat.waterAmount)}}</p>
            <p class="stat-y">昨日: {{formatMoney(resp.yesterdayOrderStat.waterAmount)}}</p>
          </div>
        </a-card-grid>
        <a-card-grid style="minWidth:180px;width:20%;height:140px;" class="grid-card">
          <div class="cBody">
            <p class="stat-t">百货销售额(元)</p>
            <p class="stat-p">{{formatMoney(resp.todayOrderStat.amount)}}</p>
            <p class="stat-y">昨日: {{formatMoney(resp.yesterdayOrderStat.amount)}}</p>
          </div>
        </a-card-grid>
        <a-card-grid style="minWidth:180px;width:20%;height:140px;" class="grid-card">
          <div class="cBody">
            <p class="stat-t">桶押金总数(元)</p>
            <p class="stat-p">{{formatMoney(resp.todayOrderStat.amount)}}</p>
          </div>
        </a-card-grid>

      </a-card>
      <!--<a-card style="margin-top:20px;">-->
        <!--<h3 slot="title" class="c-header-title">会员<span></span></h3>-->
        <!--<div slot="extra" class="c-header-extra">-->
          <!--&lt;!&ndash;<router-link to="/member/dashboard">更多</router-link>&ndash;&gt;-->
        <!--</div>-->
        <!--<a-row class="member-box">-->
          <!--<a-col :span="16">-->
            <!--<pie-chart :datas="memberOrderPieData" :colors="['lightseagreen','mediumorchid','lightsteelblue']" />-->
          <!--</a-col>-->
          <!--<a-col :span="8">-->
            <!--<p class="stat-m" v-for="(stat,sIndex) in resp.memberStat" :key="sIndex"><a-icon type="border" :class="pieCss[sIndex]" /> {{stat.type}}<span :class="pieCss[sIndex]"> {{stat.count}} </span>人消费<span :class="pieCss[sIndex]"> {{stat.orders}} </span>单, 占比<span :class="pieCss[sIndex]"> {{stat.orders>0?stat.proportion+'%':'&#45;&#45;'}} </span></p>-->
          <!--</a-col>-->
        <!--</a-row>-->
      <!--</a-card>-->
    </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {PieChart} from '@/components/charts'
import {parseTime,fmMoney} from "../../utils";
import {findHomeStat} from "../../api/dashboard";

export default {
    components: { PieChart},
    name: 'Dashboard',
    data() {
        return {
            resp:{
                //总销售额 //今日
                todayOrderStat:{amount:0.00,waterAmount:0.00,amountTotal:0.00,countTotal:0},
                yesterdayOrderStat:{amount:0.00,waterAmount:0.00,amountTotal:0.00,countTotal:0},
                //门店订单数
              orderCount:{today:0,yesterday:0},
                //新增用户数 //今日 昨日
              newUserCount:{today:0,yesterday:0},
              // 新增会员数
              newMemberCount:{today:0,yesterday:0},
                //会员
              memberStat:[]
            },
            company:{},
            memberOrderPieData:[],
            pieCss:['color-lightseagreen','color-mediumorchid','color-dodgerblue'],
        }
    },
    computed: {
        ...mapGetters([
            'name','companyName','logo'
        ]),
    },
    methods:{
        formatMoney(money){
          return fmMoney(money,2);
        },
        formatDate(date){
          return parseTime(date)
        },
        onEdit(){
          this.$router.push({path:'/companyDetail'});
        },
        async onLoad(){
            let resp = await findHomeStat();
            if(resp && resp.code == 0) {
                console.log("===home==resp",resp);
                // let piePaymentStat = resp.data.paymentStat;
                // let piePaymentData = [];
                // piePaymentStat.map(m=>{
                //    piePaymentData.push({value:m.amount,name:m.paymentTypeName})
                // })
                // this.paymentPieData = piePaymentData;
                // let pieMemberOrderStat = resp.data.memberStat;
                // let pieMemberOrderData = [];
                // let memberOrders = 0;
                // pieMemberOrderStat.map(m=>{
                //     if(m.type=="全部会员") {
                //         memberOrders = m.orders;
                //     }else{
                //         pieMemberOrderData.push({value: m.orders, name: m.type})
                //     }
                // })
                // pieMemberOrderData.push({value:resp.data.orderCountTotal-memberOrders,name:'散客',itemStyle:{color:'lightsteelblue'}})
                // this.memberOrderPieData = pieMemberOrderData;
                this.resp = resp.data;

            }
        }
    },
    mounted(){
        this.onLoad();
    }
}
</script>
